<template>
  <view class="add-vehicle-page">
    <!-- 顶部导航栏（与其他页面样式统一） -->
    <view class="nav-bar">
      <image class="back-icon" src="/static/back.png" @click="goBack"></image>
    </view>

    <!-- 蓝色过渡区域（与其他页面一致） -->
    <view class="c1"></view>

    <!-- 车辆插画容器，用于承载与导航栏衔接的白色背景 -->
    <view class="illustration-wrap">
      <image 
        class="car-illustration" 
        src="@/img/车联网服务-08我的-05我的车辆添加_slices/组 4@2x.png"
        mode="widthFix"
        @error="handleImageError"
      ></image>
    </view>

    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 车辆类型 -->
      <view class="form-item">
        <text class="label blue-label">车辆类型</text>
        <view class="input-wrapper">
          <text class="placeholder">请选择</text>
          <text class="arrow-right">＞</text>
        </view>
      </view>

      <!-- 车辆型号 -->
      <view class="form-item">
        <text class="label blue-label">车辆型号</text>
        <view class="input-wrapper">
          <text class="placeholder">请选择</text>
          <text class="arrow-right">＞</text>
        </view>
      </view>

      <!-- 车牌号码 -->
      <view class="form-item">
        <text class="label blue-label">车牌号码</text>
        <view class="input-wrapper">
          <text class="placeholder">请输入您的车牌号</text>
        </view>
      </view>

      <!-- 车主姓名 -->
      <view class="form-item">
        <text class="label blue-label">车主姓名</text>
        <view class="input-wrapper">
          <text class="placeholder">请输入您的姓名</text>
        </view>
      </view>

      <!-- 电话号码 -->
      <view class="form-item">
        <text class="label blue-label">电话号码</text>
        <view class="input-wrapper">
          <text class="placeholder">请输入您的手机号</text>
        </view>
      </view>

      <!-- 照片上传 -->
      <view class="form-item upload-item">
        <text class="label blue-label">照片</text>
        <view class="upload-wrapper">
          <image class="upload-icon" src="/static/upload-icon.png" mode="widthFix"></image>
          <text class="upload-text">上传车辆照片</text>
        </view>
      </view>
    </view>

    <!-- 添加车辆按钮 -->
    <button class="btn add-vehicle-btn" @click="handleAddVehicle">+ 添加车辆</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageError: false
    };
  },
  methods: {
    goBack() {
      uni.navigateBack({ delta: 1 });
    },
    handleImageError() {
      this.imageError = true;
      console.error('车辆图片加载失败，请检查路径是否正确');
    },
    handleAddVehicle() {
      uni.showToast({
        title: '点击了添加车辆',
        icon: 'none',
        duration: 2000
      });
    }
  }
};
</script>

<style scoped>
  /* 蓝色过渡区域（与其他页面完全一致） */
  .c1{
    background-color: #007aff;
    height: 50px;
  }

/* 页面基础样式（与其他页面统一） */
.add-vehicle-page {
  background-color: #F5F5F5;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 0;
  position: relative;
  z-index: 1;
}

/* 导航栏样式（与其他页面完全一致） */
.nav-bar {
  display: flex;
  align-items: center;
  height: 0px; /* 与其他页面导航栏高度一致 */
  background-color: #007aff;
  padding: 0 15px;
}
.back-icon {
  width: 20px;
  height: 20px; /* 与其他页面图标尺寸一致 */
}
.nav-title {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin: 0 auto;
}

/* 插画容器：与导航栏衔接的白色背景区域 */
.illustration-wrap {
  background-color: #FFFFFF;
  margin: 0 15px; /* 与导航栏两侧间距一致 */
  border-bottom-left-radius: 8px; /* 与其他卡片圆角统一 */
  border-bottom-right-radius: 8px;
  padding: 20px 15px;
  display: flex;
  justify-content: center;
  position: relative;
  top: -10px; /* 向上偏移衔接导航栏 */
  z-index: 0;
  margin-top: -30px;
}

.car-illustration {
  width: 60%; /* 保持插画比例 */
  height: auto;
}

/* 表单容器样式（与其他卡片样式统一） */
.form-container {
  background-color: #FFFFFF;
  border-radius: 8px; /* 与其他卡片圆角统一 */
  padding: 15px;
  margin: 15px;
  margin-top: -5px; /* 与插画容器微调间距 */
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* 轻微阴影增强层次感 */
}

/* 表单项通用样式 */
.form-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #F5F5F5;
}

.form-item:last-child {
  border-bottom: none;
}

/* 蓝色标签样式（主题色统一） */
.blue-label {
  background-color: #007aff; /* 主题色统一 */
  color: #FFFFFF;
  padding: 5px 10px;
  border-radius: 4px; /* 与其他标签圆角统一 */
  margin-right: 15px;
  font-size: 14px;
  min-width: 80px;
  text-align: center;
}

/* 输入框容器样式 */
.input-wrapper {
  flex: 1;
  background-color: #F8F8F8;
  border-radius: 6px; /* 输入框圆角优化 */
  padding: 12px;
  box-sizing: border-box;
  position: relative;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.placeholder {
  font-size: 14px;
  color: #999999;
}

.arrow-right {
  position: absolute;
  right: 12px;
  font-size: 16px;
  color: #CCCCCC;
}

/* 照片上传特殊样式 */
.upload-item {
  align-items: flex-start;
  padding-top: 15px;
  padding-bottom: 15px;
}

.upload-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F8F8F8;
  border-radius: 6px;
  padding: 25px 15px;
  box-sizing: border-box;
}

.upload-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
}

.upload-text {
  font-size: 14px;
  color: #999999;
}

/* 按钮基础样式统一 */
.btn {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  border: none;
}

/* 添加车辆按钮样式（与其他页面按钮统一） */
.add-vehicle-btn {
  width: calc(100% - 30px); /* 减去左右边距 */
  background-color: #007aff; /* 主题色统一 */
  color: #FFFFFF;
  font-size: 10px;
  padding: 12px 0;
  border-radius: 20px; /* 保持大圆角设计 */
  display: block;
  margin: 0 auto 20px;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3); /* 轻微阴影 */
}

.add-vehicle-btn::after {
  border: none;
}
</style>